<template>
  <div style="height: 568px">
    <Table :columns="columns" :data="tableData" stripe></Table>
    <div class="flex-row-start-start" style="margin-top: 20px">
      <div class="basic-pie">
        <pie id="kqarea" ref="kqarea" title="库区面积饼图"></pie>
      </div>
      <div class="basic-pie">
        <pie id="jznum" ref="jznum" title="库区井组数量饼图"></pie>
      </div>

      <div class="basic-pie">
        <pie id="jcdnum" ref="jcdnum" title="库区检测点数量饼图"></pie>
      </div>

      <div class="basic-pie">
        <bar id="runYear" ref="runYear" title="运行年限"></bar>
      </div>
    </div>
  </div>
</template>
<script>
import pie from "../../../components/basic/chart/pie";
import bar from "../../../components/basic/chart/bar";
import { CheckboxGroup } from "iview";
export default {
  components: {
    pie,
    bar,
  },
  data() {
    return {
      columns: [
        // { title: "编号", key: "kq_id" },
        { title: "气库名称", key: "kq_name" },
        { title: "面积(㎡)", key: "kq_area" },
        { title: "井组数量(个)", key: "jz_Num" },
        { title: "启动时间", key: "startTime" },
        { title: "运行状态", key: "kq_state" },
        { title: "数据最后更新时间", key: "updateTime" },
      ],
      tableData: [],
      kqAreaList: [],
      pageSize: 10,
    };
  },
  props: {
    kqInfoList: Object,
    jcdInfoList: Object,
    update:Number
  },
  mounted() {


  },
  watch: {
    update(val) {
      console.log(this.kqInfoList)
      this.tableData = this.kqInfoList.kqList;
      this.kqAreaList = this.kqInfoList.kqAreaList;
      this.kqJzNumList = this.kqInfoList.kqJzNumList;
      this.kqJcdNumList = this.jcdInfoList.jcdPie;
      this.$refs.kqarea.drawPie(this.kqAreaList);
      this.$refs.jznum.drawPie(this.kqJzNumList);
      this.$refs.jcdnum.drawPie(this.kqJcdNumList);
      this.$refs.runYear.drawBar(this.kqInfoList.runYearList[0]);
    },
  },
  methods: {
  },
};
</script>
<style scoped>
.basic-pie {
  width: 33.33%;
  height: 300px;
}
</style>